<template>
  <!-- 谷歌验证码 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="谷歌验证码" width="50%" :before-close="handleClose" top="200px" :close-on-click-modal="false" modal-append-to-body>
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='google_code'" label="" prop="google_code">
              <el-input class="width40" v-model="formParams.google_code" clearable placeholder="请输入谷歌验证码"/>
            <span class="colorRed" style="font-size:12px;margin-top:-20px"> 请前往：配置管理 > > 谷歌验证分页绑定</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  qrCodeCheck
} from '@/api/config'

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1
    },
  },
  data () {
    return {
      isShow: false,
      googleCodeShow: false,
      itemData:[
        { label: '谷歌验证码', key: 'google_code' },
      ],
      formParams: {
        types:this.type,
        google_code: '',
      },
      ruleForm: {
        google_code: [{ required: true, trigger: 'blur', message: '请输入谷歌验证码', }],
      },
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      that.formParams = {
        types:that.type,
        google_code: '',
      }
    },
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams));
      if (!params.google_code) {
        return that.$message.error('请输入谷歌验证码')
      }
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          qrCodeCheck(params).then(function (res) {
            that.$emit('handleConfirm')
            return params
          }).catch((error) => {
            return false
          })
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.formParams.google_code=''
      this.$emit('handleClose')
    },
  }
}
</script>

<style scoped lang="scss">

</style>
